<template>
	<div>
		<el-card class="box">
			
			<ul>
				<span style="font-size: 18px;font-weight:bold; margin-bottom: 10px;">推荐</span>
				<li class="hover-for" v-for="item in classification" :key="item.id">
					<span>{{ item.name }}</span>
				</li>
			</ul>
		</el-card>
	</div>
</template>

<script>
export default {
	name: 'FrontendVue2SideJump',

	data() {
		return {
			classification:[
				{
					id:1,
					name:'Java',
				},
				{
					id:2,
					name:'Vue',
				},
				{
					id:3,
					name:'PHP',
				},
				{
					id:4,
					name:'大数据',
				},
				{
					id:5,
					name:'AI',
				},
				{
					id:7,
					name:'前端',
				},
				{
					id:8,
					name:'架构',
				},
				{
					id:9,
					name:'数据库',
				},
				{
					id:10,
					name:'Python',
				},
				{
					id:11,
					name:'游戏开发',
				},
				{
					id:12,
					name:'运维',
				},
				{
					id:13,
					name:'网络安全',
				},
				{
					id:14,
					name:'云计算',
				},
				{
					id:15,
					name:'大数据',
				},
				{
					id:16,
					name:'研发管理',
				},
				{
					id:17,
					name:'计算机基础',
				},
				{
					id:18,
					name:'物联网',
				},
			]
		};
	},

	mounted() {
		
	},

	methods: {
		
	},
};
</script>

<style lang="less" scoped>
.box{
	width: 130px;
	border-radius: 10px;
	ul{
		display: flex;
		flex-direction: column;
		align-items: center;
		li{
			cursor :pointer;
			width: 100%;
			// margin-top: 15px;
			display: flex;
			flex-direction: column;
			align-items: center;
			border-radius: 15px;
			padding: 10px 5px;
			span{
				font-size: 15px;
				color: rgb(136, 136, 136);
			}
		}
	}
}
.hover-for:hover{
	background-color: rgba(160, 160, 160, 0.205);
	span{
		color: #409eff;
	}
}
</style>